<template>
    <div id="notify">
<!--        <div v-for="(message,index) in notify.messages" :key="index">-->
<!--            <Message :ctx="message"/>-->
<!--        </div>-->
        <draggable class="message-list" :list="notify.messages" :force-fallback="true" >
            <template #item="ctx">
                <Message :ctx="ctx.element" :index="ctx.index"/>
            </template>
        </draggable>
    </div>
</template>

<script setup lang="ts">
import {useNotifyStore} from "../../store/notify";
import {onMounted} from "vue";
import {ElNotification} from "element-plus";
import Message from "./Message.vue";

const notify = useNotifyStore()



</script>

<style>
#notify {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.message-list {
    display: flex;
    flex-direction: column;
}
</style>